<template>

  <el-row>
    <el-row class="pading-20 my-border my-bg">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>数据统计</el-breadcrumb-item>
        <el-breadcrumb-item>研发自测统计</el-breadcrumb-item>
      </el-breadcrumb>
    </el-row>

    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="自测数据统计" name="statisticsData">
        <el-row>
          <div class="operate">
            <el-button size="small" type="primary" icon="el-icon-delete" @click="clear">清空</el-button>
            <el-input ref="queryProjectText" v-model="queryProjectText" size="small" placeholder="项目名称查询" style="width: 150px;margin-left: 20px;margin-right: 10px"></el-input>
            <el-button size="small" type="primary" icon="el-icon-search" @click="query">查询</el-button>
          </div>
        </el-row>

        <el-row>
          <vxe-table  height="400" border resizable show-overflow ref="xTable" row-id="caseId" :data="tableData"
                      :row-config="{isHover: true}">
            <vxe-column
                v-for="config in tableStatisticsTitle"
                :key="config.key"
                :field="config.field"
                :title="config.title"
                :width="config.width">
            </vxe-column>
          </vxe-table>
          <el-pagination style="margin-top:30px;float: left"
                         background
                         layout="prev, pager, next"
                         @size-change="handleSizeChange"
                         @current-change="handleCurrentChange"
                         :current-page="currentPage"
                         :page-size="pageSize"
                         :page-count="pageCount">
          </el-pagination>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="自测进度预览" name="statisticsGantt">
        <div  id="statisticsGantt" class="container">
          <gantt  class="left-container" :tasks="tasks"></gantt>
        </div>
      </el-tab-pane>
    </el-tabs>

  </el-row>
</template>

<script>

import templateData from "../../../static/templateData"
import {post} from "../../../src/utils/httpUtils.js"
import Gantt from '../../components/Gantt.vue';



export default {
  name: "statisticsManagementForRd",
  components: {Gantt},
  data() {
    return {
      tableStatisticsTitle: templateData.tableStatisticsColumn,
      queryProjectText: "",
      tableData: [],
      currentPage: 1,
      pageSize: 7,
      pageCount: 0,
      activeName:'statisticsData',
      tasks: {
        data: []
      }

    }
  },
  methods: {
    handleClick(tab, event) {

    },

    toggleExpandChangeEvent({row, expanded}) {
    },
    handleSizeChange(size) {
      this.currentPage = 1;//每次改变每页多少条都会重置当前页码为1
      this.pageSize = size;
      this.getData(this.currentPage, this.pageSize, this.queryProjectText)
    },
    handleCurrentChange(size) {
      this.currentPage = size;
      this.getData(this.currentPage, this.pageSize, this.queryProjectText)
    },

    query() {
      this.getData(this.currentPage, this.pageSize, this.queryProjectText)
    },
    clear() {
      this.queryProjectText = "";
      this.getData(1, this.pageSize, "")
    },

    getData() {
      let map={},pageObject={}
      map['queryProjectText']=this.queryProjectText
      map['role']=1
      pageObject['offset']=this.currentPage
      pageObject['limit']=this.pageSize
      pageObject['data']=map
      post('/api/statistics/queryAll', pageObject).then((response) => {
        this.tableData = response.data.rows;
        this.pageCount = Math.ceil(response.data.total / this.pageSize);
      })
    },

    async getGanttData() {
      let that=this;
      let map={},pageObject={}
      map['queryProjectText']=this.queryProjectText
      map['role']=1
      pageObject['data']=map
      post('/api/statistics/queryGanttData', pageObject).then((response) => {
        that.tasks.data = response.data;
        // console.log(JSON.stringify(that.tasks))
        // this.$nextTick(()=>{
        //   this.$set(this.tasks,'data',response.data)
        //   that.tasks.data = response.data;
        // })
      })
    },

  },
  created() {
      this.getData();
      this.getGanttData();

  }
}

</script>

<style scoped>
.my-border {
  border-radius: 3px;
  border: 1px solid #ebebeb;
}


html, body {
  background-color: #fafafa;
}

.my-bg {
  background-color: #fff
}

.pading-20 {
  padding: 20px;
}

.operate {
  float: left;
  margin-left: 20px;
}

.bold {
  font-weight: bold;
}

.text-left {
  text-align: left;
}

i {
  cursor: pointer
}

.tip {
  border-left: 5px solid #409eff;
  color: #909399;
  width: 300px;
  text-align: left;
}

.container {
  height: 100%;
  width: 100%;
}

</style>
